<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-s<!---->cale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>内容足迹</title>
    <link rel="stylesheet" href="../style/reset.css"/>

    <link href="../css/mui.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link href="../css/guang.css" rel="stylesheet"/>
    <link href="../font1218/iconfont.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/Receiving-address.css"/>


    <link href="css/area.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery.area.js"></script>
    <script src="../javascript/jquery-2.1.1.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="../js/mui.js"></script>

    <script type="text/javascript" charset="utf-8">

        var winW = document.documentElement.clientWidth;
        var desW = 640;
        var scale = desW / 100;
        document.documentElement.style.fontSize = winW / scale + "px";
        if(winW > desW){
            document.documentElement.style.fontSize = "100px";
        }
        mui.init();


    </script>
</head>
<body style="background:#f3f3f3;margin-top:1rem;width:6.4rem;">
<div class="mainwrap" id="mainwrap">
    <!-- 头部 -->
    <header style="background:#fff;margin-bototm:.2rem;" class="mui-bar mui-bar-nav">
        <a class=" mui-icon iconfont mui-icon-arrowleft icon-xiangzuojiankuohao "></a>
        <h1 class="mui-title">内容足迹</h1>
    </header>
    <!-- 内容1 -->
     <div class="Content-footprints">
        <div class="footprints-img">
            <img src="../images/01.png" alt=""/>
        </div>
         <div class="footprints-txt">
            <h4>文章标题文章标题文章标题文章标题文章</h4>
             <p  style="padding:.3rem 0;">云南 - 玉溪</p>
             <span><i class="mui-icon iconfont icon-yanjing"></i>1698</span>
             <span id="dianzan1" class="dianzan"><i class="mui-icon iconfont icon-dianzan1"></i>1698</span>
         </div>
     </div>
    <!-- 内容2 -->
    <div class="Content-footprints">
        <div class="footprints-img">
            <img src="../images/01.png" alt=""/>
        </div>
        <div class="footprints-txt">
            <h4>文章标题文章标题文章标题文章标题文章</h4>
            <p  style="padding:.3rem 0;">云南 - 玉溪</p>
            <span><i class="mui-icon iconfont icon-yanjing"></i>1698</span>
            <span  id="dianzan2" class="dianzan"><i class="mui-icon iconfont icon-dianzan1"></i>1698</span>
        </div>
    </div>
    <!-- 内容3 -->
    <div class="Content-footprints">
        <div class="footprints-img">
            <img src="../images/01.png" alt=""/>
        </div>
        <div class="footprints-txt">
            <h4>文章标题文章标题文章标题文章标题文章</h4>
            <p style="padding:.3rem 0;">云南 - 玉溪</p>
            <span><i class="mui-icon iconfont icon-yanjing"></i>1698</span>
            <span  id="dianzan3" class="dianzan"><i class="mui-icon iconfont icon-dianzan1"></i>1698</span>
        </div>
    </div>
</div>

<script>

$("#dianzan1,#dianzan2,#dianzan3").click(function(){
    $(this).children().addClass("active");
});

</script>



</body>
</html>